<template>
  <div class="my-order-page">
    <!-- 预约列表 -->
    <div class="order-container">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell 
          v-for="item in orderList" 
          :key="item.id" 
          class="order-item"
          :title="item.title" 
          :label="item.time" 
          is-link
          :extra="item.status"
          :border="false"
        />
      </van-list>

      <!-- 无数据提示 -->
      <van-empty 
        v-if="orderList.length === 0 && !loading" 
        description="暂无预约记录" 
        image="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';

// 模拟预约数据状态
const loading = ref(false);
const finished = ref(false);
const orderList = ref([]);

// 预约状态映射及样式
const statusMap = {
  1: { text: '待服务', type: 'primary' },
  2: { text: '进行中', type: 'warning' },
  3: { text: '已完成', type: 'success' },
  4: { text: '已取消', type: 'danger' }
};

// 生成模拟预约数据
const generateOrderData = (count) => {
  const data = [];
  const now = new Date();
  
  for (let i = 0; i < count; i++) {
    // 生成过去7天内的日期
    const daysAgo = Math.floor(Math.random() * 7);
    const date = new Date();
    date.setDate(now.getDate() - daysAgo);
    
    // 格式化日期和时间
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hour = String(Math.floor(Math.random() * 12) + 8).padStart(2, '0');
    const minute = String(Math.floor(Math.random() * 60)).padStart(2, '0');
    
    data.push({
      id: i + 1,
      title: getRandomTitle(),
      time: `${year}-${month}-${day} ${hour}:${minute}`,
      status: statusMap[Math.floor(Math.random() * 4) + 1]
    });
  }
  
  return data;
};

// 生成随机预约标题
const getRandomTitle = () => {
  const titles = [
    '晓塘乡诗意导游预约',
    '户外探险导游服务',
    '晓塘乡美食探索之旅',
    '民俗文化导游体验',
    '摄影创作导游服务',
    '晓塘乡一日游预约',
    '亲子导游服务预约',
    '文化遗产导游讲解',
    '生态旅游导游服务',
    '徒步旅行导游预约'
  ];
  return titles[Math.floor(Math.random() * titles.length)];
};

// 加载更多数据
const onLoad = () => {
  if (finished.value) return;
  
  loading.value = true;
  // 模拟网络请求延迟
  setTimeout(() => {
    try {
      // 每次加载5条数据
      const newData = generateOrderData(5);
      orderList.value = [...orderList.value, ...newData];
      
      // 当数据超过15条时，标记为已完成
      if (orderList.value.length >= 15) {
        finished.value = true;
      }
    } catch (error) {
      console.error('加载预约数据失败:', error);
      showToast('加载数据失败');
    } finally {
      loading.value = false;
    }
  }, 800);
};

// 页面加载时初始化数据
onMounted(() => {
  onLoad();
});
</script>

<style lang="scss" scoped>
.my-order-page {
  padding-bottom: 20px;
  background-color: #f5f7fa;
  
  .page-header {
    padding: 24px 16px 16px;
    background-color: white;
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
  }
  
  .order-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
    
    .van-list {
      background-color: transparent;
      padding-bottom: 20px;
    }
    
    .order-item {
      position: relative;
      margin-bottom: 12px;
      border-radius: 12px;
      background-color: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      padding: 16px 20px;
      
      &::after {
        display: none;
      }
      
      .van-cell__title {
        font-size: 15px;
        font-weight: 500;
        color: #333;
      }
      
      .van-cell__label {
        font-size: 13px;
        color: #666;
        margin-top: 4px;
      }
      
      .van-cell__extra {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        padding: 4px 10px;
        border-radius: 16px;
        font-size: 12px;
        min-width: 56px;
        text-align: center;
      }
    }
    
    .van-loading {
      display: flex;
      justify-content: center;
      padding: 20px 0;
      
      .van-loading__spinner {
        color: #409EFF;
      }
    }
    
    .van-empty {
      padding: 40px 20px;
      
      .van-empty__image {
        width: 120px;
        height: 120px;
      }
      
      .van-empty__description {
        font-size: 14px;
        color: #666;
        margin-top: 16px;
      }
    }
  }
}
</style>